<template>
  <div v-if="isLoading" style="text-align: center"><n-spin size="large" /></div>
  <n-card v-else>
    <n-space vertical size="large">
      <div
        class="title"
        style="letter-spacing: 1px; font-size: 20px; text-align: center"
      >
        {{ research.title }}
      </div>
      <div
        class="author"
        style="letter-spacing: 1px; font-size: 14px; text-align: center"
      >
        <n-space justify="center">
          <n-button
            text
            color="rgb(1, 43, 127)"
            v-for="i in research.authors"
            @click="openProfile(i.id)"
          >
            {{ i.name }}
          </n-button>
        </n-space>
        <n-space justify="center">
          <n-button text color="rgb(1, 43, 127)">
            {{ research?.authors[0]?.institution }}
          </n-button>
        </n-space>
      </div>
      <div class="body">
        <n-space vertical>
          <div class="abstract body-item">
            <span>摘要：</span>
            <div>
              {{ research.abstract }}
            </div>
          </div>
          <div class="date body-item">
            <span>时间：</span>
            <div>
              {{ research.date }}
            </div>
          </div>
          <div class="journal body-item" v-if="research.type === 'JOUR'">
            <span>期刊：</span>
            <div v-if="research?.other?.journalName">
              {{ research?.other?.journalName }}
              {{
                (research?.other?.volume && research?.other?.volume + '期') +
                (research?.other?.issue && research?.other?.volume + '期') +
                (research?.other?.page && research?.other?.volume + '期')
              }}
            </div>
            <div v-else>未知</div>
          </div>
          <div class="conference body-item" v-if="research.type === 'CPAPER'">
            <span>会议：</span>
            <div>
              {{ research?.other?.conferenceTitle }}
              {{ research?.other?.location }}
            </div>
          </div>
          <div class="id body-item">
            <span>id：</span>
            <div>
              {{ id }}
              <n-button text @click="copy"
                ><n-icon size="16"> <copy-regular /> </n-icon
              ></n-button>
            </div>
          </div>
        </n-space>
      </div>
      <div class="action">
        <button class="button2" @click="downloadResearch">
          <n-icon size="16">
            <download />
          </n-icon>
          <span class="content2"> 下载全文</span>
        </button>
        <button class="button2">
          <n-icon size="16">
            <heart-regular />
          </n-icon>
          <span class="content2" @click="likeResearch">
            {{ research.like ? '取消点赞' : '点赞成果' }}</span
          >
        </button>
        <button class="button2" @click="askFile">
          <n-icon size="16">
            <tooltip-quote20-regular />
          </n-icon>
          <span class="content2"> 请求全文</span>
        </button>
        <button class="button2" @click="printResearch">
          <n-icon size="16">
            <help />
          </n-icon>
          <span class="content2"> 创建问题</span>
        </button>
      </div>
    </n-space>
  </n-card>
</template>

<script setup>
import { Download, Help } from '@vicons/tabler'
import { TooltipQuote20Regular } from '@vicons/fluent'
import { HeartRegular, CopyRegular } from '@vicons/fa'

import { useMessage } from 'naive-ui'
import api from '@/api/api'

const message = useMessage()
const { Research } = api

const props = defineProps({
  id: {
    type: String,
    required: true
  }
})

const { id } = props
const copy = () => {
  const input = document.createElement('input') // 创建input对象
  input.value = id // 设置复制内容
  document.body.appendChild(input) // 添加临时实例
  input.select() // 选择实例内容
  document.execCommand('Copy') // 执行复制
  document.body.removeChild(input) // 删除临时实例
  message.success('复制成功')
}

const research = ref({})

onMounted(() => {
  getResearch()
})

const isLoading = ref(true)

const openProfile = (id) => {
  if (!id && id !== 0) {
    message.info('该作者暂无主页')
  } else {
    window.open('/profile/' + id, '_blank')
  }
}
const getResearch = () => {
  Research.getResearch({ id }).then((res) => {
    if (res.success) {
      isLoading.value = false
      research.value = res.data
    }
  })
}
const askFile = () => {
  Research.askFile({ id }).then((res) => {
    if (res.success) {
      message.success('请求全文成功，已提醒作者上传全文附件！')
    }
  })
}

const likeResearch = () => {
  Research.likeResearch({ id }).then((res) => {
    if (res.success) {
      research.value.like = !research.value.like
    }
  })
}

const downloadResearch = () => {
  if (research.value.file) {
    window.open(research.value.file)
  } else {
    message.info('该成果没有全文，请选择请求全文让作者上传！')
  }
}
const printResearch = () => {
  window.open('/forum/create/0?mention=' + id)
}
</script>

<style scoped lang="scss">
.body-item {
  span:first-child {
    float: left;
    font-weight: 600;
  }
  div:nth-child(2) {
    overflow: hidden;
  }
}
* {
  transition: 0.4s;
}
.action {
  margin-top: 10px;
  .button2 {
    border: none;
    margin: 0 7px;
    padding: 6px 12px 4px;
    font-size: 12px;
    border-radius: 10px;
    background: rgb(255, 161, 87);
    color: rgb(255, 255, 255);
    span.content2 {
      vertical-align: 22%;
    }
    &:hover {
      background: rgb(255, 213, 93);
    }
  }
  button:hover {
    cursor: pointer;
  }
}
</style>
